<template>
  <div class="bg">
    <van-nav-bar class="loginNavBar" safe-area-inset-top placeholder :right-text="$t('Local')" fixed @click-right="goLocal">
      <template #left>
        <van-icon name="ellipsis" color="#fff" size="24" @click="openMenu" />
      </template>
    </van-nav-bar>
    <van-popup v-model="show" position="left" :style="{width:'200px',height:'100%'}">
      <!-- 选择国际化 -->
      <van-nav-bar safe-area-inset-top :title="$t('Language')" />
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell v-for="item in langs" :key="item.code" class="left" :title="item.txt" @click="selectLang(item.code)">
            <template #right-icon>
              <van-radio :name="item.code" checked-color="#F39800" />
            </template>
          </van-cell>
          <!-- 二维码扫描 -->
          <van-cell class="left" :title="$t('QRScan')" is-link to="/scanguide" />
        </van-cell-group>
      </van-radio-group>
      <van-tabbar>
        <van-tabbar-item style="color:#333">{{$t('Version')}} : V4.1.4</van-tabbar-item>
      </van-tabbar>
    </van-popup>
    <div class="logo">
      <img src="../assets/logo.png" alt="SolaxCloud">
    </div>
    <van-form @submit="onSubmit">
      <van-field
        class="ipt"
        v-model="username"
        :placeholder="$t('LoginAccount')"
        clearable
        @focus="creat_isShow=false"
        @blur="creat_isShow=true"
        :rules="[{ required: true}]"
      />
      <van-field
        class="ipt"
        v-model="password"
        type="password"
        :placeholder="$t('Password')"
        clearable
        @focus="creat_isShow=false"
        @blur="creat_isShow=true"
        :rules="[{ required: true}]"
      />
      <van-row>
        <van-col class="remb1" span="12">
          <van-checkbox checked-color="#F39800" v-model="remember">{{$t('Rpassword')}}</van-checkbox>
        </van-col>
        <van-col class="remb2" span="12"><span @click="forget">{{$t('Fpassword')}}</span></van-col>
      </van-row>
      <div style="margin: 50px 0 100px 0;">
        <van-button class="login" plain hairline native-type="submit">{{$t('Login')}}</van-button>
      </div>
    </van-form>
    <!-- creat new account -->
    <van-tabbar class="creat" v-if="creat_isShow" fixed>
      <van-tabbar-item @click="goSignUp">{{$t("CreatAccount")}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  data(){
    return {
      show:false,
      radio:'',
      langs:[
        {code:'en_US',txt:'English'},
        {code:'zh_CN',txt:'中文'},
        {code:'nl_NL',txt:'Nederlands'},
        {code:'de_DE',txt:'Deutsch'},
        {code:'pl_PL',txt:'Polska'},
        {code:'pt_BR',txt:'Português'},
        {code:'ja_JP',txt:'日本語'},
        {code:'fr_FR',txt:'Français'},
        {code:'es_ES',txt:'Español'},
        {code:'tu_TU',txt:'Türk'},
        {code:'ru_RU',txt:'русский'}
        ],
      username:localStorage.getItem('userName'),
      password:localStorage.getItem('password'),
      remember:localStorage.getItem('remember'),
      creat_isShow:true
    }
  },
  mounted() {
    this.radio = localStorage.getItem('lan') || 'en_US';
  },
  methods: {
    openMenu(){
      this.show=true;
    },
    selectLang(lan){
      this.radio = lan;
      this.$i18n.locale = lan;
      localStorage.setItem('lan',lan)
    },
    forget(){
      this.$router.push({path:'/forget'});
    },
    onSubmit(){
      localStorage.setItem("userName",this.username);
      if(this.remember){
        localStorage.setItem("remember",true);
        localStorage.setItem("password",this.password);
      }else{
        localStorage.setItem("remember",'');
        localStorage.setItem("password",'');
      }
      this.urlChoose(1);
    },
    async urlChoose(code){
      this.comm.loadingShow();
      let data=await this.API.loginIn(code,{'userName':this.username,'password':md5(this.password)});
      if(data.exception==="成功!"){
        localStorage.setItem("domain",code);
        localStorage.setItem("tokenId",data.result.tokenId);
        localStorage.setItem("userId",data.result.userId);
        localStorage.setItem("userName",data.result.userName);
        if(data.result.userType==5){
          localStorage.setItem("role",5);
          this.$router.push({path:'/main'});
        }else{
          localStorage.setItem("role",3);
          this.$router.push({path:'/agentIndex'});
        }
      }else if(data.exception==0){
        this.urlChoose(0);
      }else{
        this.comm.tipsShow('LoginError');
      }
    },
    goLocal(){
      this.$router.push({path:'/localin'});
    },
    goSignUp(){
      sessionStorage.setItem('setFrom','/login');
      this.$router.push({path:'/scan'});
    }
  }
}
</script>

<style lang="less">
.bg{
  position: fixed;
  height: 100%;
  width: 100%;
  bottom:0;
  top:0;
  background: url('../assets/loginbg.png') no-repeat center;
  background-size: cover;
  overflow-y:auto;
  .loginNavBar .van-nav-bar{
    background-color:rgba(0, 0, 0, 0);
  }
}
.left{
  text-align: left;
}
.logo{
  width: 70px;
  margin: 45px auto 5px;
  img{
    width: 70px;
  }
}
.ipt{
  background: none;
  margin-top: 15px;
  .van-field__control{
    color: #ffffff;
  }
}
.remb1{
  padding:20px 0 0 12px;
  font-size: 14px;
  .van-checkbox__label{
    color: #ffffff;
  }
}
.remb2{
  font-size: 14px;
  padding: 20px 12px 0 0;
  text-align: right;
  color: #a2a4a9;
}
.login{
  width: 50%;
  height: 60px;
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  font-size: 18px;
  background: none;
}
.creat{
  background: rgba(255,255,255,0.2);
  .van-tabbar-item--active{
    color: #b0b2b9;
    font-size: 18px;
    background: none;
  }
}
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
  border: none;
}
</style>
